<template>
    <div>
      <div style="margin: 20px 0px">
   
   <!-- input -->
   <el-input
    placeholder="请输入内容"
    v-model="keyword"
    clearable
    style="width: 20%"
   >
   </el-input>
   
   <!-- 按钮 -->
   <el-button type="primary" @click="queryPage">搜索</el-button>
   <!-- 新增按钮 -->
   <el-button type="success" @click="showAddDialog">新增</el-button>
  </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编码" > </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="typeName" label="类型" > </el-table-column>
        <el-table-column prop="target" label="目标人群" > </el-table-column>
        <el-table-column prop="effect" label="作用" > </el-table-column>
        <el-table-column prop="advReactions" label="不良症状" > </el-table-column>
        <el-table-column prop="producer" label="生产公司" > </el-table-column>
        <el-table-column prop="createTime" label="创建时间" > </el-table-column>
        <el-table-column label="操作" width="180">
        <template slot-scope="scope" >
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
      <!-- 定义一个分页标签 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[4, 10, 20, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <!-- 定义一个对话框 -->
    <el-dialog
      title="新增-修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="疫苗名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="疫苗类型">
          <!-- <el-input v-model="form.type"></el-input> -->
          <el-select
            v-model="form.type"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标人群">
          <el-input v-model="form.target"></el-input>
        </el-form-item>
        <el-form-item label="作用">
          <el-input v-model="form.effect"></el-input>
        </el-form-item>
        <el-form-item label="不良反应">
          <el-input v-model="form.advReactions"></el-input>
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input v-model="form.producer"></el-input>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-input type="datetime-local" v-model="form.createTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">提 交</el-button>
      </span>
    </el-dialog>
    </div>
  </template>
  <script>

  //导入request工具
import request from "@/utils/request";
  export default {
    data() {
      return {
        tableData: [],
        options: [],
        form: {
        id: "",
        name: "",
        type: "",
        typeName: "",
        target: "",
        effect: "",
        advReactions: "",
        producer: "",
        createTime: "",
        },
        dialogVisible: false,
        total: 0,
        pageNum: 1, //当前页码
        pageSize: 10, //当前数量
        keyword: "",
      };
    },
    created() {
      this.queryPage();
      this.queryAll();
  // //发起一个异步请求，查询分类的数据
  // request.get("/vaccinum/list", {
  //     params: {
  //       pageNum: this.pageNum,
  //       pageSize: this.pageSize
  //     },
  //   }).then((res) => {
  //     console.log(res);
  //     // 把后台的响应的数据赋值给data中的tableData
  //     this.tableData = res.list;
  //   });
    },
    methods: {
        // 查询所有的疫苗的分类信息
      queryAll() {
        request
          .get("/vaccinum-type/queryAll", {
            params: {},
          })
          .then((res) => {
            console.log(res);
            
            this.options = res.list;
          });

      },
      queryPage() {
      request.get("/vaccinum/queryPage", {
        params: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res);
        // 把后台的响应的数据赋值给data中的tableData
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    showAddDialog(){
      
      this.form = {
        id: "",
        name: "",
        type: "",
        typeName: "",
        target: "",
        effect: "",
        advReactions: "",
        producer: "",
        createTime: "",
        };
        this.dialogVisible = true;
       
    },
    // 插入数据
    save(){
        if(this.form.id == ''){
        request
        // post 请求方式    提交的数据
        .post("/vaccinum/insert", this.form)
        // then表示请求后的回调函数
        .then((res) => {
          //判断操作是否成功
          if (res.ok == true) {
            //重新查询数据
            this.queryPage();
            
            //消息提示
            this.$message({
              message: "新增成功",
              type: "success",
            });
            //关闭对话框
            this.dialogVisible = false;
          } else {
            this.$message.error("新增失败");
          }
        });
        }else{
          request
        // post 请求方式    提交的数据
        .post("/vaccinum/update", this.form)
        // then表示请求后的回调函数
        .then((res) => {
          //判断操作是否成功
          if (res.ok == true) {
            //重新查询数据
            this.queryPage();
            //消息提示
            this.$message({
              message: "更新成功",
              type: "success",
            });
            //关闭对话框
            this.dialogVisible= false;
          } else {
            this.$message.error("更新失败");
          }
        });
        }
 
    },
      resetDateFilter() {
        this.$refs.filterTable.clearFilter("date");
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column["property"];
        return row[property] === value;
      },
       // 更改每页的记录数
       handleSizeChange(val) {
      // 更新数据
      this.pageSize = val;
      // 查询
      this.queryPage();
      console.log(`Size每页 ${val} 条`);
    },
    // 更改页码（当前页）
    handleCurrentChange(val) {
      // 更新数据
      this.pageNum = val;
      // 查询
      this.queryPage();
      console.log(`Current当前页: ${val}`);
    },
      // 对话框关闭前的弹窗
      handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },

    handleEdit(index, row) {
      console.log(index, row);
      this.form.id = row.id
      this.form.name = row.name
      this.form.type = row.type
      this.form.typeName = row.typeName
      this.form.target = row.target
      this.form.effect = row.effect
      this.form.advReactions = row.advReactions
      this.form.producer = row.producer
      this.form.createTime = row.createTime
      this.dialogVisible = true

    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          console.log(row.name);
          // 调用删除接口
          request.get("/vaccinum/delete",{
            params: {
            id: row.id
            }
            }).then((res)=>{
              // 判断是否删除成功
            if(res.ok == true){
              this.queryPage();
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
            }else{
              this.$message({
              type: 'info',
              message: '删除失败'
            });  
            }
            })
        }).catch((res) => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });       
        });
      console.log(row.id);
    },
    },
  
  };
  </script>